<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Layers</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var map;
 var geocoder;
    var browserSupportFlag =  new Boolean();
  
  var kmlLayer = null;
  var respLayer = null;
  var neurLayer = null;
  var currentLayer = null;
  
  function initialize() {
	geocoder = new google.maps.Geocoder();
    var myLatlng = new google.maps.LatLng(27.676535, -97.748637);
    var myOptions = {
      zoom: 14,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
 respLayer = new google.maps.KmlLayer('http://www.pinfosec.com/envdata/NuecesCty1.kml');
 neurLayer = new google.maps.KmlLayer('http://www.pinfosec.com/envdata/NuecesCty2.kml');
//    kml();

	if(navigator.geolocation) {
            browserSupportFlag = true;
            navigator.geolocation.getCurrentPosition(function(position) {
                initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                map.setCenter(initialLocation);
            }, function() {
                handleNoGeolocation(browserSupportFlag);
            });
        // Try Google Gears Geolocation
        } else if (google.gears) {
            browserSupportFlag = true;
            var geo = google.gears.factory.create('beta.geolocation');
            geo.getCurrentPosition(function(position) {
                initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
                map.setCenter(initialLocation);
            }, function() {
                handleNoGeoLocation(browserSupportFlag);
            });
        // Browser doesn't support Geolocation
        } else {
            browserSupportFlag = false;
            handleNoGeolocation(browserSupportFlag);
 
        }
  }
  
  function resp() {
//    map.setCenter(new google.maps.LatLng(27.676535, -97.748637));
    clearLayer();
//    map.setZoom(14);
    respLayer.setMap(map);
    currentLayer = respLayer;
  }
  
  function neur() {
//    map.setCenter(new google.maps.LatLng(27.676535, -97.748637));
//    map.setZoom(14);
    clearLayer();
    neurLayer.setMap(map);
    currentLayer = neurLayer;
  }
  
  function kml() {
    url = document.getElementById("kmlUrl").value;
    clearLayer();
    kmlLayer = new google.maps.KmlLayer(url, { map: map });
    currentLayer = kmlLayer;
  }
  
  function clearLayer() {
    if (currentLayer != null) {
      currentLayer.setMap(null);
    }
  }
  
  function kmlKeyUp(e) {
    var keyCode;
  
    if (window.event) {
        keyCode = window.event.keyCode;
    } else if (variable) {
        keyCode = e.which;
    }
  
    if (keyCode == 13) {
        document.getElementById("kmlUrl").blur();
        document.getElementById("kmlButton").click();
    }
  }

function handleNoGeolocation(errorFlag) {
        if (errorFlag == true) {
            alert("Geolocation service failed.");
            initialLocation = newyork;
        } else {
            alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
            initialLocation = siberia;
        }
        map.setCenter(initialLocation);
    }
   

    function codeAddress() {
        var address = document.getElementById("address").value;
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }
</script>
<style>
  body {
    font-family: sans-serif;
  }
  
  #map_canvas {
    border: 1px solid black;
  }
  
  #layers {
    border: 1px solid #000088;
    background-color: #e0e0e0;
    width: 512px;
    margin-top: 1px;
  }
  
  #heading {
    font-weight: bold;
    margin: 2px;
  }
</style>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
  <div id="map_canvas" style="width:512px; height:400px"></div>
  <div id="layers">
  <div id="heading">Layers</div>
  <table>
    <tr>
      <td><input onclick="resp()" type="radio" name="layer" id="respButton" value="resp"/></td>
      <td align="left">Respiratory</td>
    </tr>
    <tr>
      <td><input onclick="neur()" type="radio" name="layer" id="necButton" value="neur"/></td>
      <td align="left">Neurological</td>
    </tr>
<tr>
	<td> <input id="address" type="textbox" value="Corpus Christi, TX"> <input type="button" value="Encode" onclick="codeAddress()">
	</td>
</tr>
  </table>
  </div>
</body>
</html>
